<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="shurikenCanvas" width="200" height="200"></canvas>
    <script>
      const canvas = document.getElementById("shurikenCanvas");
      const ctx = canvas.getContext("2d");
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const outerRadius = 80;
      const innerRadius = 30;
      let rotation = 0; // 添加旋转角度变量

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
        ctx.save(); // 保存当前状态
        ctx.translate(centerX, centerY); // 移动到中心点
        ctx.rotate(rotation); // 应用旋转

        ctx.beginPath();
        for (let i = 0; i < 4; i++) {
          // 计算外点角度 (90度为间隔)
          const outerAngle = (i * Math.PI) / 2;
          // 修改坐标计算，移除centerX和centerY偏移
          const outerX = outerRadius * Math.sin(outerAngle);
          const outerY = -outerRadius * Math.cos(outerAngle);

          // 计算内点角度 (在外点角度基础上偏移45度)
          const innerAngle = outerAngle + Math.PI / 4;
          // 修改坐标计算，移除centerX和centerY偏移
          const innerX = innerRadius * Math.sin(innerAngle);
          const innerY = -innerRadius * Math.cos(innerAngle);

          if (i === 0) {
            ctx.moveTo(outerX, outerY);
          } else {
            ctx.lineTo(outerX, outerY);
          }
          ctx.lineTo(innerX, innerY);
        }
        // 连接最后一个点到起点，形成闭合图形
        ctx.closePath();

        // 设置样式并绘制
        ctx.fillStyle = "#000000";
        ctx.fill();

        ctx.restore(); // 恢复状态

        rotation += 0.12; // 增加旋转角度
        requestAnimationFrame(draw); // 请求下一帧动画
      }

      draw(); // 启动动画
    </script>
  </body>
</html>
